<template>
	<view class="fui-wrap">
		<fui-result v-if="err" type="fail" title="操作失败" :descr="err">
			<fui-button @click="$reLaunch('parking/menus')" width="400rpx" height="84rpx" text="返回菜单" type="success" bold :margin="['48rpx','0','24rpx']"></fui-button>
		</fui-result>
		<fui-form v-if="detail" error-position="1" labelColor="#7a7a7a" ref="form" top="0" :model="formData">
			<fui-form-item label="车主">
				<fui-input readonly :borderBottom="false" :padding="[0]" :value="detail.contact+' - '+detail.mobile"></fui-input>
			</fui-form-item>
			<fui-form-item label="车牌号">
				<fui-input readonly :borderBottom="false" :padding="[0]" :value="parsePlate(detail.plates)"></fui-input>
			</fui-form-item>
			<block v-if="detail.rules_type=='monthly'">
				<fui-form-item label="充值金额">
					<view class="line-between">
						<fui-input-number @change="changeMoney" :size="32" :width="120" :height="60" :signWidth="32" v-model="formData.money" :min="fee" :max="10000" :step="fee"></fui-input-number>
						<text>元</text>
					</view>
				</fui-form-item>
				<fui-form-item label="充值方式" prop="status">
					<fui-radio-group name="radio" v-model="formData.change_type" @change="changeType">
						<view>
							<fui-label>
								<view class="fui-align__center">
									<fui-radio scaleRatio="0.8" borderRadius="6rpx" value="now" checked></fui-radio>
									<text style="margin-left: 10rpx;" class="fui-text">从今天开始续期</text>
								</view>
							</fui-label>
							<fui-label :margin="['30rpx','0','0','0']">
								<view class="fui-align__center">
									<fui-radio scaleRatio="0.8" borderRadius="6rpx" value="end"></fui-radio>
									<text style="margin-left: 10rpx;" class="fui-text">从月租结束开始续期</text>
								</view>
							</fui-label>
							<fui-label :margin="['30rpx','0','0','0']">
								<view class="fui-align__center">
									<fui-radio scaleRatio="0.8" borderRadius="6rpx" value="time"></fui-radio>
									<text style="margin-left: 10rpx;" class="fui-text">自定义日期续期</text>
								</view>
							</fui-label>
						</view>
					</fui-radio-group>
				</fui-form-item>
				<fui-form-item label="开始时间" :arrow="formData.change_type=='time'" asterisk prop="starttime">
					<fui-input readonly :borderBottom="false" :padding="[0]" placeholder="请选择开始时间" v-model="formData.starttime" @click="showTime('starttime')"></fui-input>
				</fui-form-item>
				<fui-form-item label="结束时间" :arrow="formData.change_type=='time'" asterisk prop="endtime">
					<fui-input readonly :borderBottom="false" :padding="[0]" placeholder="请选择结束时间" v-model="formData.endtime" @click="showTime('endtime')"></fui-input>
				</fui-form-item>
			</block>
			<block v-if="detail.rules_type=='stored'">
				<fui-form-item label="当前余额">
					<fui-input readonly :borderBottom="false" :padding="[0]" :value="'￥'+parseNumber(detail.balance)"></fui-input>
				</fui-form-item>
				<fui-form-item label="充值金额">
					<fui-input type="digit" :borderBottom="false" :padding="[0]" v-model="formData.money">
						<text style="font-size: 24rpx;border-radius: 4rpx;background-color: #8b8b8b;color: #fff;padding: 4rpx 8rpx;">元</text>
					</fui-input>
				</fui-form-item>
				<fui-form-item label="充值方式" prop="status">
					<fui-radio-group name="radio" v-model="formData.change_type">
						<view class="fui-list__item">
							<fui-label>
								<view class="fui-align__center">
									<fui-radio scaleRatio="0.8" borderRadius="6rpx" value="add" checked></fui-radio>
									<text style="margin-left: 10rpx;" class="fui-text">增加</text>
								</view>
							</fui-label>
							<fui-label :margin="['0','0','0','0']">
								<view class="fui-align__center">
									<fui-radio scaleRatio="0.8" borderRadius="6rpx" value="minus"></fui-radio>
									<text style="margin-left: 10rpx;" class="fui-text">减少</text>
								</view>
							</fui-label>
							<fui-label :margin="['0','0','0','0']">
								<view class="fui-align__center">
									<fui-radio scaleRatio="0.8" borderRadius="6rpx" value="last"></fui-radio>
									<text style="margin-left: 10rpx;" class="fui-text">最终</text>
								</view>
							</fui-label>
						</view>
					</fui-radio-group>
				</fui-form-item>
			</block>	
			<fui-form-item label="备注" prop="remark">
				<fui-input :borderBottom="false" :padding="[0]" placeholder="请输入备注" v-model="formData.remark"></fui-input>
			</fui-form-item>
			<view class="fui-btn__box">
				<fui-button :disabled="disabledButton" text="提交" bold @click="submit"></fui-button>
			</view>
		</fui-form>
		<fui-date-picker :show="checkTime.show" type="3" :value="checkTime.value"  @change="changeTime" @cancel="cancelTime"></fui-date-picker>
	</view>
</template>

<script>
	import {methods} from '@/utils/core.js';
	import {parseNumber,formatDate} from '@/utils/util.js';
	 function formatNextMonthDate(date,num){
		let resultDate = new Date(date.getTime());
		resultDate.setMonth(resultDate.getMonth() + num);
		resultDate.setDate(resultDate.getDate() -1);
		return formatDate(resultDate);
	}
	export default {
		data() {
			return {
				err:'',
				detail:'',
				disabledButton:false,
				fee:0,
				formData:{
					cars_id:'',
					money:'',
					remark:'',
					starttime:'',
					endtime:'',
					change_type:''
				},
				checkTime:{
					show:false,
					key:'',
					value:''
				}
			}
		},
		onLoad(e) {
			if(e.cars_id){
				this.$get('parking/cars/recharge-detail',{id:e.cars_id},true).then(res=>{
					this.detail=res;
					if(this.detail.rules_type=='monthly'){
						uni.setNavigationBarTitle({
							title:'月卡充值'
						});
						this.formData.cars_id=this.detail.id;
						this.formData.change_type='end';
						this.formData.money=parseNumber(this.detail.rules.fee);
						this.fee=parseNumber(this.detail.rules.fee);
						this.changeMoney();
					}
					if(this.detail.rules_type=='stored'){
						uni.setNavigationBarTitle({
							title:'储值卡充值'
						});
						this.formData.cars_id=this.detail.id;
						this.formData.change_type='add';
						this.formData.money=parseNumber(this.detail.rules.min_stored || 100);
					}
				}).catch(err=>{
					this.err=err.msg;
				});
			}
			if(e.plate_number && e.rules_type){
				this.$get('parking/cars/recharge-detail',{
					plate_number:e.plate_number,
					rules_type:e.rules_type
				},true).then(res=>{
					this.detail=res;
					if(e.rules_type=='monthly'){
						uni.setNavigationBarTitle({
							title:'月卡充值'
						});
						this.formData.cars_id=this.detail.id;
						this.formData.change_type='end';
						this.formData.money=parseNumber(this.detail.rules.fee);
						this.fee=parseNumber(this.detail.rules.fee);
						this.changeMoney();
					}
					if(e.rules_type=='stored'){
						uni.setNavigationBarTitle({
							title:'储值卡充值'
						});
						this.formData.cars_id=this.detail.id;
						this.formData.change_type='add';
						this.formData.money=parseNumber(this.detail.rules.min_stored || 100);
					}
				}).catch(err=>{
					this.err=err.msg;
				});
			}
		},
		methods: {
			...methods,
			parseNumber,
			formatDate:function(d){
				return formatDate(new Date(d*1000));
			},
			parsePlate:function(plates){
				let plate_number=[];
				for(let i=0;i<plates.length;i++){
					plate_number.push(plates[i].plate_number);
				}
				return plate_number.join(',');
			},
			changeMoney:function(e){
				if(e){
					this.formData.money=Number(e.value);
				}
				let change_type=this.formData.change_type;
				this.formatDateStart(change_type);
				this.formatDateEnd(change_type);
			},
			changeType:function (e){
				let change_type=e.detail.value;
				this.formData.money=Number(this.formData.money);
				this.formatDateStart(change_type);
				this.formatDateEnd(change_type);
			},
			formatDateStart:function (change_type){
				let str='';
				if(change_type=='now'){
					str=formatDate(new Date());
				}
				if(change_type=='end'){
					str=formatDate(new Date((this.detail.endtime+1)*1000));
				}
				if(change_type=='time'){
					str=formatDate(new Date());
				}
				this.formData.starttime=str;
			},
			formatDateEnd:function (change_type){
				let str='';
				let num=Math.round(this.formData.money/this.detail.rules.fee);
				if(change_type=='now'){
					str=formatNextMonthDate(new Date(),num);
				}
				if(change_type=='end'){
					str=formatNextMonthDate(new Date((this.detail.endtime+1)*1000),num);
				}
				if(change_type=='time'){
					str=formatNextMonthDate(new Date(),num);
				}
				this.formData.endtime=str;
			},
			showTime:function(e){
				if(this.formData.change_type!='time'){
					return;
				}
				this.checkTime.value=this.formData[e];
				this.checkTime.key=e;
				this.checkTime.show=true;
			},
			cancelTime:function(){
				this.checkTime.value='';
				this.checkTime.key='';
				this.checkTime.show=false;
			},
			changeTime:function(e){
				let key=this.checkTime.key;
				this.formData[key]=e.result;
				this.cancelTime();
			},
			submit:function(){
				this.disabledButton=true;
				this.$post('parking/cars/recharge',{cars_id:this.detail.id,...this.formData},true,true).then(res=>{
					uni.setStorageSync('refresh',1);
					this.$navigateBack(1500);
				}).catch(err=>{
					this.disabledButton=false;
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.fui-btn__box{
	padding: 20rpx;
}
.fui-list__item{
	display: flex;
	justify-content: space-between;
	width: 80%;
}
.line-between{
	display: flex;
	justify-content: space-between;
	align-items: center;
	text{
		font-size: 24rpx;
		border-radius: 4rpx;
		background-color: #8b8b8b;
		color: #fff;
		padding: 4rpx 8rpx;
	}
}
</style>